<template>
    <div class="container">
      <div class="tips-title">1.基础用法<span class="tips-explain">type="success/warning/danger/info"</span></div>
      <el-tag>标签一</el-tag>
      <el-tag type="success">标签二</el-tag>
      <el-tag type="warning">标签三</el-tag>
      <el-tag type="danger">标签四</el-tag>
      <el-tag type="info">标签五</el-tag>
      <div class="tips-title">2.可移除标签<span class="tips-explain">closable</span></div>
      <el-tag closable>标签一</el-tag>
      <el-tag closable type="success">标签二</el-tag>
      <el-tag closable type="warning">标签三</el-tag>
      <el-tag closable type="danger">标签四</el-tag>
      <el-tag closable type="info">标签五</el-tag>
      <div class="tips-title">3.不同尺寸<span class="tips-explain"></span></div>
      <el-tag closable>默认标签</el-tag>
      <el-tag size="medium" closable>中等标签</el-tag>
      <el-tag size="small" closable>小型标签</el-tag>
      <el-tag size="mini" closable>超小标签</el-tag>
      <div class="tips-title">4.不同主题<span class="tips-explain">三个不同的主题：dark、light 和 plain。默认为light</span></div>
      <div class="tips-title-sub">effect="dark"</div>
      <el-tag v-for="item in items4" :key="item.id" :type="item.type" effect="dark" style="margin-right: 5px;">{{ item.label }}</el-tag>
      <div class="tips-title-sub">effect="plain"</div>
      <el-tag v-for="item in items5" :key="item.id" :type="item.type" effect="plain" style="margin-right: 5px;">{{ item.label }}</el-tag>
      <div class="tips-title">5.动态编辑标签<span class="tips-explain"></span></div>
      <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">{{tag}}</el-tag>
      <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm"></el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
    </div>
</template>
<script>
  export default {
    name: 'd-tag',
    data() {
        return {
          items4: [{ id: '1', type: '', label: '标签一' },{ id: '2', type: 'success', label: '标签二' },{ id: '3', type: 'info', label: '标签三' },{ id: '4', type: 'danger', label: '标签四' },{ id: '5', type: 'warning', label: '标签五' }],
          items5: [{ id: '6', type: '', label: '标签一' },{ id: '7', type: 'success', label: '标签二' },{ id: '8', type: 'info', label: '标签三' },{ id: '9', type: 'danger', label: '标签四' },{ id: '10', type: 'warning', label: '标签五' }],
          dynamicTags: ['标签一', '标签二', '标签三'],
          inputVisible: false,
          inputValue: ''
        }
    },
    methods: {
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      }
    }
  }
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>

